<template>
  <a
    :href="href"
    @click="(e) => (!disabled || !href) && $emit('click', e)"
    :class="['el-link', type ? `el-link--${type}` : '', { 'is-underline': underline && !disabled, 'is-disabled': disabled }]"
  >
    <i :class="icon" v-if="icon" />
    <span v-if="$slots.default">
      <slot />
    </span>
  </a>
</template>

<script>
export default {
  name: "ElLink",
  props: {
    href: String,
    underline: {
      type: Boolean,
      default: true,
    },
    disabled: Boolean,
    type: {
      type: String,
      default: "default",
      validator: (val) => ["primary", "success", "warning", "danger", "info"].includes(val),
    },
    icon: String,
  },
};
</script>

<style lang="scss" scoped></style>
